<template>
  <div class="all-music-list">
	  <div>
		  <el-select v-model="categoryValue" placeholder="请选择" :popper-append-to-body="false"
		   @change="categoryHandle">
		       <div class="category-title">全部歌单分类</div>
		  	<div style="padding: 6px 0;">
		  		<el-button style="width:100%;height: 40px;">全部歌单</el-button>
		  	</div>
		     <div v-for="(item2,index2) in categoryList" :key="index2">
		     <div style="padding: 6px 0;color: #409EFF;">{{item2}}:</div>
		     <div v-for="(item,index) in list" :key="index" >
		       <el-option
		         :label="item1.name"
		         :value="item1.name"
		  		v-for="(item1,index1) in list[index]" 
		  		:key="index1" 
		  		v-if="item1.category==index2">
		  		<template slot-scope="scope">
		  			<div class="category-item">
		  				<el-button style="width: 80px;height: 35px;">{{ item1.name }}</el-button>
		  			</div>
		  		</template>
		  	</el-option>
		      </div>
		      </div>	
		  </el-select>
	  </div>
    <div class="all-music-list-hot">
		<div>热门标签:</div>
		<div v-for="(item,index) in tagsList" :key="index" class="all-music-list-hot-item">
			<el-button type="text" @click="tagshandle(item.name)">{{item.name}}</el-button>
		</div>
	</div>
	<music-list :MusicList="MusicList"></music-list>
	<el-pagination
	      @size-change="handleSizeChange"
	      @current-change="handleCurrentChange"
	      :current-page="listQuery.offset"
	      :page-sizes="[50,60 ,70, 80]"
	      :page-size="listQuery.limit"
	      layout="total, sizes, prev, pager, next, jumper"
	      :total="total">
	</el-pagination>
  </div>
</template>

<script>

import MusicList from "components/content/music-list/music-list.vue"
import {_getHighquality,_getPlaylist,_getPlaylisthot} from "network/allmusiclist.js"
import {pagination} from "mixin/components/pagination.js"
const defaultListQuery ={
	limit:50,
	offset:1,
	cat:'全部'
}
export default {
  name:'AllMusicList',
  components:{MusicList},
  mixins:[pagination],
  data(){
    return{
      categoryList:[],
	  categoryValue:'',
	  categoryListItem:[],
	  list:[],
	 
	  //存放所有分类选项的列表,内部是categories所有分类的子数组
	  /**@ ArrayItems
	   *0：langs:[],//语种
	   *1：styles:[],//风格
	   *2：scenes:[],//场景
	   *3：emotions:[],//情感
	   *4：themes:[],//主题
	   */
	  listQuery: Object.assign({}, defaultListQuery),
	  tagsList:[],
	  // 歌单
	  MusicList:[],
	  total:0
    }
  },
  created(){
	 this.getList() 
	 this.categoryValue ="全部",
	 this.getPlaylist()
	 this.getPlaylisthot()
  },
  methods:{
   getList(){
	   _getHighquality().then(res=>{
		   this.categoryList = res.data.categories
		   this.categoryListItem = res.data.sub
		   // console.log( this.categoryListItem )

		   for(let k in this.categoryList){
			this.list[k] = this.categoryListItem.filter((item)=>{
				 return item.category == k;
			})			
		   }
	   })
   },
   categoryHandle(val){
	 this.listQuery.cat=val;
	 this.getPlaylist();
   },
   getPlaylist(){
	  let params = this.listQuery;
	  _getPlaylist(params).then(res=>{
	  		this.MusicList = res.data.playlists
	  		this.total = res.data.total
	  }) 
   },
   getPlaylisthot(){
	   _getPlaylisthot().then(res=>{
		   this.tagsList = res.data.tags
	   })
   },
   tagshandle(val){
	   this.categoryValue = val;
	   this.listQuery.cat=val;
	   this.getPlaylist()
   },
 
  }
}
</script>

<style lang="less" scoped>
	.all-music-list{
		padding: 20px 70px;
	}
/deep/ .el-select-dropdown__wrap{
  width: 460px !important;
}
/deep/ .el-select-dropdown__item{
	height: auto !important;
	white-space: normal !important;
	over-flow: break-world !important;
	display: inline-block !important;
	padding: 0 !important;
}
// .el-select-dropdown__item
/deep/ .el-button+.el-button {
    margin-left: 0px;
}
/deep/ .el-button{	
	padding:0;
}
/deep/ .el-select-dropdown__list{
	padding: 20px 20px;
}


.category-title{
	font-weight: 700;
	color: var(--text-color);
	font-size: 16px;
}
.category-title:after{
	margin: 10px 0;
	content: '';
	display: block;
	width: 100%;
	height: 1px;
	background-color:#dcdfe6;
}
.all-music-list-hot{
	display: flex;
	margin: 10px 0;
	div{
		text-align: center;
		width: 100px;
		height: 30px;
		line-height: 30px;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		font-size:14px;
		
	}
	.all-music-list-hot-item span:hover{
		color: var(--tag-color);
	}
}
   
</style>